<template>
  <div class="wrap-bg">
    <div 
        class="head-box h-360" 
        :style="{background: `url(${getAssetsImages('business-bg')}) no-repeat`, 'background-size': '100%'}"
    >
    </div>
    <div class="padlr320 padtb30">
        <div class="search-box flex ju-bt">
            <div class="search-filter flex-a ju-bt padtb20 padlr50">
                <div class="filter-city flex flex-a">
                    <el-dropdown trigger="click">
                        <span class="flex-a search-txt">
                            <span class="mar-r5">中国</span>
                            <el-icon><ArrowDown /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>长沙</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-service">
                    <span class="txt-select">工商服务</span>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-service flex flex-a">
                    <el-dropdown trigger="click">
                        <span class="flex-a search-txt">
                            <span class="mar-r5" :class="{'txt-select': false}">选择服务项</span>
                            <el-icon><ArrowDown /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>长沙</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                    <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-form flex-a">
                    <div class="form-label">
                        姓名
                    </div>
                    <div class="form-ipt">
                        <el-input v-model="filterForm.name" style="width: 150px" placeholder="请输入姓名" />
                    </div>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-form flex-a">
                    <div class="form-label">
                        手机
                    </div>
                    <div class="form-ipt">
                        <el-input 
                            v-model="filterForm.mobile" 
                            style="width: 150px;" 
                            placeholder="请输入联系方式" 
                        />
                    </div>
                </div>
            </div>
            <div class="search-btn">
                立即咨询
            </div>
        </div>
    </div>
    <div 
        class="block-box padlr320"
        :style="{background: `url(${getAssetsImages('business-card-bg')}) no-repeat`, 'background-size': '100%'}"
    >
        <div class="block-tit pad-t37">
            公司注册
        </div>
        <div class="block-tabs">
            <div class="flex mar-t50">
                <div 
                    class="block-tabs-item"
                    v-for="(item, index) in blockTabsModule.tabsList"
                    :key="index"
                    :class="{'block-tabs-on': index === blockTabsModule.tabsCurrent}"
                    @click="tabsChange(index)"
                >
                    {{  item.title }}
                </div>
            </div>
            <div class="block-tabs-line"></div>
        </div>
        <div class="register-card-list flex flex-wrap pad-b60">
            <div 
                class="card-list-li mar-t30 "
                :class="{'mar-r30': (index + 1) % 3 !== 0}"
                v-for="(item, index) in registerCard.registerList"
                :key="index"
                :style="{
                    background: index === registerCard.registerCurrent? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                    'background-size': '100% 100%'
                }"
                @click="registerCard.registerCurrent = index"
            >
                <div class="pad20">
                    <div class="li-tit flex-a ju-bt">
                        <div>有限责任公司注册</div>
                        <el-image 
                             @click="onCardLi(item, index)"
                            style="width: 16px; height: 13px" 
                            :src="getAssetsImages('arrows-icon2')" 
                        />
                    </div>
                    <div class="li-tips mar-t5">
                        专业顾问一对一服务，一站式解决公司创立发展需求
                    </div>
                    <div class="card-price mar-t20">
                        <span class="price-unit">￥</span>
                        <span class="price-num">2500.00</span>
                        <span class="price-label">/件起</span>
                    </div>
                </div>
                <div class="li-btns flex">
                    <div class="btn-item">咨询客服</div>
                    <div class="btn-item btn-buy">立即购买</div>
                </div>
            </div>
        </div>
        
    </div>
    <div class="change-block padlr320">
        <div class="block-tit pad-t60">
            变更注销
        </div>
        <div class="block-tabs-card flex flex-wrap  mar-t39" v-if="changeBox.info">
            <div class="card-l">
                <el-image 
                    style="height: 160px;" 
                    :src="getAssetsImages('card-bg3')" 
                />
                <div class="card-l-info padlr20 pad-t10 pad-b19">
                    <div class="info-tit">{{ changeBox.info.title }}</div>
                    <div class="info-tips mar-t8">{{ changeBox.info.describe }}</div>
                    <div class="info-price mar-t25">
                        <span class="price-unit">￥</span>
                        <span class="price-num">{{ changeBox.info.price }}</span>
                        <span class="price-label">/件起</span>
                    </div>
                    <div class="info-btn flex ju-bt mar-t12">
                        <div class="btn" @click="onCardLi(changeBox.info)">查看详情</div>
                        <div class="btn btn2" >立即购买</div>
                    </div>
                </div>
            </div>
            <div class="card-list   flex flex-wrap">
                <div 
                    class="card-li pad-l20" 
                    v-for="(item, index) in changeBox?.changeList?.slice(0,4)"
                    :key="index"
                    @click="changeBox.changeCurrent = item.id"
                >
                    <div 
                        class="card-li-item pad20"
                        :style="{
                            background: item.id === changeBox.changeCurrent ? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                            'background-size': '100% 100%'
                        }"
                        :class="{'mar-t20': index > 1}"
                    >
                        <div class="card-tit flex-a ju-bt">
                            <div class="flex-a">
                                <span class="tit-txt">{{ item.title }}</span>
                            </div>
                            <el-image 
                                @click="onCardLi(item, index)"
                                style="width: 30px; height: 30px" 
                                :src="getAssetsImages('arrows-icon')" 
                            />
                        </div>
                        <div class="card-tips mar-t8">
                            {{ item.describe }}
                        </div>
                        <div class="card-price mar-t20 flex-a ju-bt">
                            <div class="card-price-info">
                                <span class="price-unit">￥</span>
                                <span class="price-num">{{ item.price }}</span>
                                <span class="price-label">/件起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-list card-list2 flex flex-wrap">
                <div 
                    class="card-li mar-t20"
                    v-for="(item, index) in changeBox?.changeList?.slice(4)"
                    :key="index"
                    @click="changeBox.changeCurrent = item.id"
                    :class="{'mar-r30': (index + 1) % 3 !== 0}"
                >
                    <div 
                        class="card-li-item pad20"
                        :style="{
                            background: item.id === changeBox.changeCurrent ? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                            'background-size': '100% 100%'
                        }"
                    >
                        <div class="card-tit flex-a ju-bt">
                            <div class="flex-a">
                                <span class="tit-txt">{{ item.title }}</span>
                            </div>
                            <el-image 
                                @click="onCardLi(item, index)"
                                style="width: 30px; height: 30px" 
                                :src="getAssetsImages('arrows-icon')" 
                            />
                        </div>
                        <div class="card-tips mar-t8">
                            {{ item.describe }}
                        </div>
                        <div class="card-price mar-t20 flex-a ju-bt">
                            <div class="card-price-info">
                                <span class="price-unit">￥</span>
                                <span class="price-num">{{ item.price }}</span>
                                <span class="price-label">/件起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <service-process :service_id="service_id" parentType="tos"></service-process>
    <advantage :service_id="service_id" parentType="tos"></advantage>
  </div>
</template>

<script setup>
/**
 * 工商服务
*/
// 服务流程组件
import serviceProcess from "@/components/serviceProcess/index.vue";
// 平台优势组件
import advantage from "@/components/advantage/advantage.vue"
import { ref, reactive } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const router = useRouter();
const route = useRoute()
const service_id = ref(route.query.id ?? '')
const toPath = (url,item) => {
    console.log(item, "--item");
    if(!item) return
    router.push({
        path: 'productDetail',
        query: {
            id: item.id,
            title: item.title,
        }
    });
};
let filterForm = reactive({
    name: "",
    mobile: ""
})
let blockTabsModule = reactive({
    tabsList: [
        {
            title: "内资注册"
        },
        {
            title: "外资注册"
        }
    ],
    tabsCurrent: 0,
})
const tabsChange = index => { 
    blockTabsModule.tabsCurrent = index;
} 
let registerCard = reactive({
    registerList: [1,1,1,1,1],
    registerCurrent: 1,
})
const changeBox = reactive({
    info: {
        title: "12",
        price: "111",
        describe: "描述",
        id: 1,
    },
    changeList: [
        {
            title: "12",
            price: "111",
            describe: "描述",
            id: 1,
        },
        {
            title: "12",
            price: "111",
            describe: "描述",
            id: 2,
        },
        {
            title: "12",
            price: "111",
            describe: "描述",
            id: 3,
        },
        {
            title: "12",
            price: "111",
            describe: "描述",
            id: 4,
        },
        {
            title: "12",
            price: "111",
            describe: "描述",
            id: 5,
        },
        {
            title: "12",
            price: "111",
            describe: "描述",
            id: 6,
        },
        {
            title: "12",
            price: "111",
            describe: "描述",
            id: 7,
        },
    ],
    changeCurrent: 1,
})
const onCardLi = (item, index) => {
    if (index) {
        changeBox.changeCurrent = item.id;
    }
    console.log(item, "--item");
    toPath('productDetail', item)
}
// 获取列表
const getList = () => { 
    return serviceApi.getList({
        type: service_id.value,
        is_all: 0
    }).then(res => { 
        // changeBox.changeList = res.data.child
        // changeBox.info = res.data.info
    })
}
getList();
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>

.block-tabs-card {
    .card-l {
        height: 351px;
        width: 412px;
        background: linear-gradient(180deg,#f0f3f7, #ffffff);
        border: 2px solid #ffffff;
        box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
        .card-l-info {
            .info-tit {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: Semibold;
                text-align: left;
                color: #181818;
            }
            .info-tips {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: left;
                color: #575966;
            }
            .info-price {
                .price-unit,
                .price-num {
                    color: #ff4600;
                }  
                .price-num {
                    font-size: 28px;
                    font-family: PingFang SC, PingFang SC-Semibold;
                    font-weight: Semibold;
                    text-align: left;
                }
                .price-label {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #181818;
                }
            }
            .info-btn {
                .btn {
                    width: 176px;
                    height: 40px;
                    border: 1px solid #0052d9;
                    border-radius: 2px;
                    font-size: 16px;
                    font-family: PingFang TC, PingFang TC-Regular;
                    font-weight: Regular;
                    text-align: center;
                    color: #0052d9;
                    line-height: 40px;
                }
                .btn2 {
                    background: #0052d9;
                    color: #fff;
                }
                
            }
        }
    }
    .card-list2 {
        width: 100% !important;
        .card-li {
            width: 30% !important;
        }
    }
    .card-list {
        width: calc(100% - 412px) ;
        .card-li {
            min-width: 400px;
            width: 50%;
            .card-li-item {
                // height: 140px;
                background: linear-gradient(180deg,#f0f3f7, #ffffff);
                border: 2px solid #ffffff;
                border-radius: 4px;
                box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                .card-tit {
                    .tit-txt {
                        font-size: 16px;
                        font-family: PingFang SC, PingFang SC-Semibold;
                        font-weight: bold;
                        text-align: left;
                        color: #181818;
                    }
                    .tit-hot {
                        width: 30px;
                        height: 16px;
                        background: #ff4d00;
                        border-radius: 6px 6px 6px 2px;
                        font-size: 12px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: bold;
                        text-align: center;
                        color: #ffffff;
                        line-height: 17px;
                    }
                }
                .card-tips {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #575966;
                }
                .card-price {
                    .price-unit,
                    .price-num {
                        color: #ff4600;
                    }  
                    .price-num {
                        font-size: 28px;
                        font-family: PingFang SC, PingFang SC-Semibold;
                        font-weight: Semibold;
                        text-align: left;
                    }
                    .price-label {
                        font-size: 14px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        text-align: left;
                        color: #181818;
                    }
                    .price-btn {
                        width: 88px;
                        height: 32px;
                        border: 1px solid #0052d9;
                        border-radius: 2px;
                        font-size: 14px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        text-align: left;
                        color: #0052d9;
                        text-align: center;
                        line-height: 32px;
                    }
                    .price-btn-on {
                        background: #0052d9;
                        color: #ffffff;
                    }
                }
            }
        }
    }
}
.card-price {
    .price-unit,
    .price-num {
        color: #ff4600;
    }  
    .price-num {
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
    }
    .price-label {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #181818;
    }
}
.block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
}
.block-box {
    .register-card-list {
        .card-list-li {
            width: 400px;
            // height: 200px;
            background: #ffffff;
            border-radius: 4px;
            box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
            .li-tit {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Medium;
                font-weight: Medium;
                text-align: left;
                color: #202020;
            }
            .li-tips {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: left;
                color: #575966;
            }
            .li-btns {
                .btn-item {
                    width: 50%;
                    height: 40px;
                    background: #80a8ec;
                    border-radius: 0px 0px 0px 4px;
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: Medium;
                    text-align: center;
                    color: #ffffff;
                    line-height: 40px;
                }
                .btn-buy {
                    background: #0052d9;
                    border-radius: 0px 0px 4px 0px;
                }
            }
        }
    }
    .block-tabs {
        .block-tabs-item {
            width: 50%;
            height: 39px;
            font-size: 20px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: Semibold;
            text-align: center;
            color: #202020;
            line-height: 39px;
        }
        .block-tabs-on {
            background: #0052d9;
            color: #ffffff;
            border-radius: 0 35px 0 0;
        }
    }
    .block-tabs-line {
        height: 4px;
        background: #0052d9;
    }
}

:deep(.el-input__wrapper) {
    box-shadow: none;
    // flex-grow: 0;
    // background: transparent ;
    // width: 100%;
}
:deep(.search-txt:focus) {
  outline: none;
}
.search-box {
    height: 64px;
    background: #ffffff;
    border: 1px solid #1752d9;
    border-radius: 4px;
    
    span {
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        font-size: 15px;
    }
    .search-filter {
        width: calc(100% - 160px);
        span {
            color: #222426;
        }
        .filter-form {
            .form-label {
                line-height: 20px;
            }
        }
        .filter-service {
            span {
                color: #a2a6ad;
            }
            
            .txt-select {
                color: #222426;
            }
        }
    }

    .search-btn {
        width: 160px;
        height: 64px;
        background: #0052d9;
        border-radius: 0px 4px 4px 0px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #ffffff;
        text-align: center;
        line-height: 64px;
    }
}
</style>